import React from 'react'
import {Button, Form, Input, Row,} from 'antd';

const formItemLayout = {
  labelCol: {
    xs: {span: 6},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 16},
    sm: {span: 16},
  },
}

class RegisterModal extends React.Component {
  state = {
    confirmDirty: false
  }
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({confirmDirty: this.state.confirmDirty || !!value});
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }
  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], {force: true});
    }
    callback();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.register(values, ()=>{
            this.props.nextStep()
        })
      }
    })
  }

  handleClick = () =>{
    this.props.changeIsRegisterStatus(true)
  }

  render() {
    const {getFieldDecorator} = this.props.form
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item
          label='姓名'>
          {getFieldDecorator('username', {
            rules: [{required: true, message: '请输入姓名', whitespace: true}],
          })(
            <Input/>
          )}
        </Form.Item>
        <Form.Item
          label="邮箱"
        >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: '邮箱格式错误',
            }, {
              required: true, message: '请输入邮箱',
            }],
          })(
            <Input/>
          )}
        </Form.Item>
        <Form.Item
          label="密码"
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: '请输入密码',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password"/>
          )}
        </Form.Item>
        <Form.Item
          label="确认密码"
        >
          {getFieldDecorator('confirm', {
            rules: [{
              required: true, message: '请确认密码',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur}/>
          )}
        </Form.Item>

        <Row type='flex' justify='center' style={{textAlign: 'center', lineHeight: '40px'}}>
          <Button type='primary' htmlType='submit' size='large' style={{marginRight: '.20rem'}}>注册</Button>
          <a onClick={this.handleClick}>已有账号？直接报名</a>
        </Row>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegisterModal);

export default WrappedRegistrationForm
